import React, {createRef} from "react";
import { UserOutlined, KeyOutlined} from '@ant-design/icons';
import {Button, Checkbox, Input, Tabs} from "antd";
import './login.scss'
import {login} from "../../api/userApi";
import {getRefValue} from "../../utils/refUtils";


function Login (props) {
    const { TabPane } = Tabs;
    const username = createRef()
    const password = createRef()

    const tab_click = (key) => {
        console.log(key)
    }

    const remember = (e) => {
        console.log(`checked = ${e.target.checked}`);
    }

    const gotoSignUp = () => {
        window.location.href = './signup'
    }

    const submit = () => {
        const data = {
            username: getRefValue(username),
            password: getRefValue(password)
        }
        login(data)
            .then(res => {
                console.log(res)
                if (res.code === 200){
                    localStorage.setItem("data", JSON.stringify(res.data))
                    window.location.href = './'
                }
            })

    }

    return(
        <div className={'container'}>
            <div className={'main'}>
                <div className={'image'}>
                    <div className={'title'}>
                        重庆市停车场管理系统
                    </div>
                </div>

                <div className={'panel'}>
                    <div className={'panel_tabs'}>
                        <Tabs defaultActiveKey="1" onChange={tab_click} centered={true} tabBarGutter={50}>
                            <TabPane  tab="账号登录" key="1" animated={true}>
                                <div className={'account_way'}>
                                    <Input size="large" placeholder="用户名" prefix={<UserOutlined />} ref={username}/>
                                    <br/>
                                    <br/>
                                    <Input.Password size="large" placeholder="密码" prefix={<KeyOutlined />} ref={password}/>
                                    <br/>
                                    <br/>
                                    <div className={'code_area'}>
                                        <div className={'code_input'}>
                                            <Input size={'large'} placeholder={'验证码'} prefix={<KeyOutlined />}/>
                                        </div>
                                        <div className={'code_image'}>

                                        </div>
                                    </div>

                                    <div className={'account_submit'} onClick={submit}>
                                        <Button type="primary">登录</Button>
                                    </div>

                                    <div className={'account_options'}>
                                        <Checkbox onChange={remember}>记住密码</Checkbox>
                                        <div className={'forget'}>忘记密码？</div>
                                    </div>

                                    <div className={'sign_up'}>
                                        还没有账号？
                                        <span className={'sign_up_click'} onClick={gotoSignUp}>去注册</span>
                                    </div>

                                </div>
                            </TabPane>
                            <TabPane  tab="短信验证登录" key="2" animated={true}>
                                <div className={'phone_way'}>
                                    <Input size="large" placeholder="手机号" prefix={<UserOutlined />} />
                                    <br/>
                                    <br/>
                                    <div className={'code_area'}>
                                        <div className={'code_input'}>
                                            <Input size={'large'} placeholder={'验证码'} prefix={<KeyOutlined />}/>
                                        </div>
                                        <div className={'send_code'}>
                                            <Button>获取验证码</Button>
                                        </div>
                                    </div>
                                    <div className={'phone_submit'}>
                                        <Button type="primary">登录</Button>
                                    </div>
                                </div>
                            </TabPane>
                        </Tabs>
                    </div>
                </div>
            </div>

            <div className={'footer'}>
                渝公网安备 50019002502240号
            </div>
        </div>
    )
}

export default Login